import React, {Component} from 'react';
import { View, Text, Image } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

import HomeScreen from './Router/HomeScreen'
import DetailsScreen from './Router/DetailsScreen'
import News from './Router/News'
import Test from './Router/block'

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
  News:{
    screen: News
  }
},
{
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'green',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold',
        },

    }
}
);


const TabNavigator = createBottomTabNavigator(
  {
    Main: {
      screen: AppNavigator,
      navigationOptions: ({ navigation }) => {
        const { routeName } = navigation.state;
        // let flag = true;
        // if(routeName !== 'Main' && routeName !== 'Test' ){
        //   flag = false;
        // } else {
        //   flag = true;
        // }
        // alert(routeName)
        return {
          // tabBarVisible:false,
          tabBarLabel:'主页面',
          tabBarIcon: ({ focused }) => {
            return (
              <Image
              style={{width: 30, height:30}}
              source={
                focused
                  ? require('./images/ic_home_entertainment_p.png')
                  : require('./images/ic_home_entertainment_n.png')
              }
            />
            )
          }
        }
      }
    },
    Test:{
      screen: Test,
        navigationOptions: {
            // 底部导航
          tabBarLabel:'测试页面',
          tabBarIcon: ({ focused }) => {
         return (
            <Image
             style={{width: 30, height:30}}
             source={
            focused
             ? require('./images/ic_home_home_p.png')
            : require('./images/ic_home_home_n.png')
           }
         />
        )
  }
      }
    }
  },
  {
    initialRouteName: 'Main',
    tabBarOptions: {
      activeTintColor: 'gold',
      inactiveTintColor: 'gray',
      style: {
        height: 50,
      }
    },
    defaultNavigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state;

      return {
        gesturesEnabled: false
      }
    }
  }
);


const AppContainer = createAppContainer(TabNavigator)

class App extends Component {
  render() {
    return (
      <AppContainer/>
    )
  }
}

export default App;
